import React, {Component} from "react";

function Welcome(props) {
  return <div>hello {props.name}</div>;
}

class Welcome2 extends Component {
  render() {
    return <div>Welcome {this.props.name}</div>;
  }
}

function Form(props) {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('clicked~')
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type='submit'>Submit</button>
    </form>
  )
}

class Toggle extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isToggleOn: true,
      isToggleOn2: true,
      isToggleOn3: true,
      isToggleOn4: true,
    }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.setState({
      isToggleOn: !this.state.isToggleOn
    })
  }

  handleClick2 = () => {
    this.setState({
      isToggleOn2: !this.state.isToggleOn2
    })
  }

  handleClick3(v, b) {
    console.log(v, b)
    this.setState({
      isToggleOn3: !this.state.isToggleOn3
    })
  }

  handleClick4(v) {
    console.log(v)
    this.setState({
      isToggleOn4: !this.state.isToggleOn4
    })
  }

  render() {
    return (
      <div>
        1
        <button onClick={this.handleClick}>{this.state.isToggleOn ? 'on' : 'off'}</button>
        2
        <button onClick={this.handleClick2}>{this.state.isToggleOn2 ? 'on2' : 'off2'}</button>
        3
        <button onClick={(e) => this.handleClick3('id', e)}>{this.state.isToggleOn3 ? 'on3' : 'off3'}</button>
        4
        <button onClick={this.handleClick4.bind(this, 'tt')}>{this.state.isToggleOn4 ? 'on4' : 'off4'}</button>
      </div>
    )
  }
}

export default Toggle;
